<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人账户中心 - 平台会员服务</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px 0;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
            background: #fff;
            border-radius: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            color: white;
            padding: 40px 30px;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            top: -100px;
            right: -80px;
        }
        
        .profile-top {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            position: relative;
            z-index: 2;
        }
        
        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid rgba(255, 255, 255, 0.3);
            overflow: hidden;
            margin-right: 25px;
            background: #5b86e5;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .user-id {
            font-size: 26px;
            opacity: 0.9;
            font-weight: 300;
        }
        
        .account-stats {
            display: flex;
            justify-content: space-between;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 25px;
            position: relative;
            z-index: 2;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 24px;
            opacity: 0.9;
        }
        
        /* 主体内容 */
        .main-content {
            padding: 40px 30px;
        }
        
        /* 卡片样式 */
        .card {
            background: #fff;
            border-radius: 20px;
            padding: 35px 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
            margin-bottom: 35px;
            border: 1px solid #eee;
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f0f4ff;
        }
        
        .card-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            margin-right: 20px;
        }
        
        .card-title {
            font-size: 36px;
            font-weight: 600;
            color: #4a6bff;
        }
        
        /* 实名认证 */
        .auth-status {
            display: flex;
            align-items: center;
            background: #f0f4ff;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .auth-icon {
            width: 50px;
            height: 50px;
            background: #4a6bff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            margin-right: 20px;
        }
        
        .auth-text {
            flex: 1;
            font-size: 28px;
        }
        
        .auth-text .highlight {
            color: #4a6bff;
            font-weight: 600;
        }
        
        .auth-action {
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            color: white;
            border: none;
            border-radius: 12px;
            padding: 15px 30px;
            font-size: 26px;
            font-weight: 500;
            cursor: pointer;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 35px;
        }
        
        .form-row {
            display: flex;
            margin: 0 -15px;
        }
        
        .form-col {
            flex: 1;
            padding: 0 15px;
        }
        
        label {
            display: block;
            font-size: 28px;
            margin-bottom: 15px;
            font-weight: 500;
            color: #444;
        }
        
        .required::after {
            content: " *";
            color: #ff4d4f;
        }
        
        input, select {
            width: 100%;
            padding: 25px;
            font-size: 26px;
            border: 2px solid #e1e9ff;
            border-radius: 15px;
            background: #f8fbff;
            transition: all 0.3s;
        }
        
        input:focus, select:focus {
            border-color: #4a6bff;
            outline: none;
            box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.2);
        }
        
        /* 交易密码 */
        .password-hint {
            font-size: 24px;
            color: #666;
            margin-top: 10px;
            padding: 15px;
            background: #f9f9ff;
            border-radius: 12px;
        }
        
        /* 会员服务 */
        .membership-plans {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            margin-top: 20px;
        }
        
        .plan-card {
            flex: 1;
            min-width: 200px;
            border: 2px solid #e6e9f0;
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s;
        }
        
        .plan-card.popular {
            border-color: #4a6bff;
            position: relative;
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(74, 107, 255, 0.2);
        }
        
        .popular-tag {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #ff8a00 0%, #ff5252 100%);
            color: white;
            padding: 8px 25px;
            border-radius: 20px;
            font-size: 24px;
            font-weight: 600;
        }
        
        .plan-name {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #4a6bff;
        }
        
        .plan-price {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 20px;
        }
        
        .plan-price .period {
            font-size: 26px;
            font-weight: 400;
            color: #666;
        }
        
        .plan-desc {
            font-size: 26px;
            margin-bottom: 25px;
            color: #666;
            min-height: 80px;
        }
        
        .plan-benefit {
            font-size: 28px;
            font-weight: 600;
            color: #4a6bff;
            margin-bottom: 20px;
        }
        
        .plan-features {
            list-style: none;
            margin-bottom: 30px;
            text-align: left;
        }
        
        .plan-features li {
            font-size: 24px;
            padding: 10px 0;
            position: relative;
            padding-left: 30px;
        }
        
        .plan-features li:before {
            content: "✓";
            color: #4a6bff;
            position: absolute;
            left: 0;
            top: 10px;
            font-weight: bold;
        }
        
        .upgrade-btn {
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            color: white;
            border: none;
            border-radius: 15px;
            padding: 20px;
            font-size: 28px;
            font-weight: 600;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .upgrade-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(74, 107, 255, 0.4);
        }
        
        /* 提现限制 */
        .withdrawal-info {
            background: #f0f4ff;
            border-radius: 15px;
            padding: 30px;
            margin-top: 20px;
        }
        
        .withdrawal-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #4a6bff;
        }
        
        .withdrawal-content {
            font-size: 26px;
            line-height: 1.8;
        }
        
        .withdrawal-content li {
            margin-bottom: 15px;
            padding-left: 30px;
            position: relative;
        }
        
        .withdrawal-content li:before {
            content: "•";
            color: #4a6bff;
            font-weight: bold;
            position: absolute;
            left: 15px;
        }
        
        /* 发布任务 */
        .task-publish {
            display: flex;
            gap: 25px;
            margin-top: 25px;
        }
        
        .task-level {
            flex: 1;
            border: 2px solid #e6e9f0;
            border-radius: 20px;
            padding: 25px;
            text-align: center;
            transition: all 0.3s;
        }
        
        .task-level:hover {
            border-color: #4a6bff;
            transform: translateY(-5px);
        }
        
        .task-name {
            font-size: 32px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #4a6bff;
        }
        
        .task-price {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .task-desc {
            font-size: 24px;
            color: #666;
        }
        
        /* 按钮样式 */
        .btn {
            display: block;
            width: 100%;
            padding: 30px;
            background: linear-gradient(135deg, #4a6bff 0%, #7b4cff 100%);
            color: white;
            font-size: 32px;
            font-weight: 600;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(74, 107, 255, 0.4);
            text-align: center;
            text-decoration: none;
            margin-top: 20px;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(74, 107, 255, 0.6);
        }
        
        /* 底部信息 */
        footer {
            text-align: center;
            padding: 40px;
            color: #7d9ed8;
            font-size: 24px;
            margin-top: 20px;
            background: #f8fbff;
            border-top: 1px solid #e1e9ff;
        }
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .footer-links a {
            color: #5b86e5;
            text-decoration: none;
            font-weight: 500;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        /* 响应式调整 */
        @media (max-width: 750px) {
            .container {
                width: 100%;
                border-radius: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="profile-top">
                <div class="avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="user-info">
                    <div class="user-name">张小明</div>
                    <div class="user-id">ID: U20230815001</div>
                </div>
            </div>
            
            <div class="account-stats">
                <div class="stat-item">
                    <div class="stat-value">¥1,250.00</div>
                    <div class="stat-label">账户余额</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">普通会员</div>
                    <div class="stat-label">当前等级</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">15%</div>
                    <div class="stat-label">平台扣点</div>
                </div>
            </div>
        </div>
        
        <div class="main-content">
            <!-- 实名认证卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <div class="card-title">实名认证</div>
                </div>
                
                <div class="auth-status">
                    <div class="auth-icon">
                        <i class="fas fa-exclamation-circle"></i>
                    </div>
                    <div class="auth-text">
                        <span class="highlight">您尚未完成实名认证！</span> 除浏览外，其他功能需实名认证后方能使用
                    </div>
                    <button class="auth-action">立即认证</button>
                </div>
                
                <div class="withdrawal-info">
                    <div class="withdrawal-title">提现限制说明</div>
                    <ul class="withdrawal-content">
                        <li><strong>个人用户：</strong>每月最高提现额度1.5万元</li>
                        <li><strong>平台商家：</strong>每月最高提现额度15万元</li>
                        <li>提现功能需完成实名认证后方可使用</li>
                        <li>提现申请将在1-3个工作日内处理</li>
                    </ul>
                </div>
                
                <div class="form-group">
                    <label class="required">实名认证费用</label>
                    <input type="text" value="¥1.00" readonly>
                    <div class="password-hint">
                        实名认证需支付1元认证费（用于身份验证系统）。认证完成后，您将获得完整平台功能权限。
                    </div>
                </div>
            </div>
            
            <!-- 交易密码卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="card-title">交易密码设置</div>
                </div>
                
                <div class="form-row">
                    <div class="form-col">
                        <div class="form-group">
                            <label class="required">设置交易密码</label>
                            <input type="password" placeholder="请输入6位数字密码">
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label class="required">确认交易密码</label>
                            <input type="password" placeholder="请再次输入密码">
                        </div>
                    </div>
                </div>
                
                <div class="password-hint">
                    交易密码用于账户资金变动时的安全验证，请设置6位数字密码并妥善保管
                </div>
            </div>
            
            <!-- 会员服务卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-crown"></i>
                    </div>
                    <div class="card-title">会员服务</div>
                </div>
                
                <div class="form-group">
                    <label>当前会员类型：普通会员</label>
                    <div class="password-hint">
                        普通会员收益扣除平台信息服务费15%，SVIP会员仅扣点5%
                    </div>
                </div>
                
                <div class="membership-plans">
                    <div class="plan-card">
                        <div class="plan-name">普通会员</div>
                        <div class="plan-price">¥0 <span class="period">/年</span></div>
                        <div class="plan-desc">免费注册，基础功能</div>
                        <div class="plan-benefit">收益扣点 15%</div>
                        <ul class="plan-features">
                            <li>免费浏览平台内容</li>
                            <li>可发布任务（需支付信息费）</li>
                            <li>基础客服支持</li>
                        </ul>
                        <button class="upgrade-btn" disabled>当前使用</button>
                    </div>
                    
                    <div class="plan-card popular">
                        <div class="popular-tag">推荐</div>
                        <div class="plan-name">SVIP会员</div>
                        <div class="plan-price">¥80 <span class="period">/年</span></div>
                        <div class="plan-desc">高级特权，超低扣点</div>
                        <div class="plan-benefit">收益扣点仅 5%</div>
                        <ul class="plan-features">
                            <li>所有普通会员功能</li>
                            <li>接任务收益扣点仅5%</li>
                            <li>优先任务推送</li>
                            <li>专属客服支持</li>
                            <li>更高任务承接量</li>
                        </ul>
                        <button class="upgrade-btn">升级SVIP</button>
                    </div>
                </div>
                
                <div class="password-hint" style="margin-top: 20px;">
                    <p><i class="fas fa-info-circle"></i> SVIP会员优惠：在校高校生40元/年，退役军人40元/年，社会人群80元/年</p>
                </div>
            </div>
            
            <!-- 账户充值卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-wallet"></i>
                    </div>
                    <div class="card-title">账户充值</div>
                </div>
                
                <div class="form-group">
                    <label class="required">充值金额</label>
                    <div class="form-row">
                        <div class="form-col">
                            <select>
                                <option value="">选择充值金额</option>
                                <option value="5">¥5</option>
                                <option value="20">¥20</option>
                                <option value="50">¥50</option>
                                <option value="100">¥100</option>
                                <option value="custom">自定义金额 (¥50以上)</option>
                            </select>
                        </div>
                        <div class="form-col">
                            <input type="text" placeholder="或输入自定义金额">
                        </div>
                    </div>
                </div>
                
                <div class="password-hint">
                    充值资金可用于：实名认证费、发布任务信息费、升级会员等
                </div>
                
                <a href="#" class="btn">立即充值</a>
            </div>
            
            <!-- 任务发布卡片 -->
            <div class="card">
                <div class="card-header">
                    <div class="card-icon">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <div class="card-title">任务发布</div>
                </div>
                
                <div class="password-hint">
                    普通用户仅需短信认证即可发布任务（无需充值），申请成为从业者接任务需充值完成实名认证
                </div>
                
                <div class="task-publish">
                    <div class="task-level">
                        <div class="task-name">市级发布</div>
                        <div class="task-price">¥1.00</div>
                        <div class="task-desc">任务在您所在市级区域展示</div>
                    </div>
                    
                    <div class="task-level">
                        <div class="task-name">省级发布</div>
                        <div class="task-price">¥5.00</div>
                        <div class="task-desc">任务在全省范围内展示</div>
                    </div>
                    
                    <div class="task-level">
                        <div class="task-name">全国发布</div>
                        <div class="task-price">¥8.00</div>
                        <div class="task-desc">任务在全国范围内展示</div>
                    </div>
                </div>
                
                <a href="#" class="btn">发布新任务</a>
            </div>
        </div>
        
        <footer>
            <p>© 2023 平台服务 | 让您的价值得到更好实现</p>
            <div class="footer-links">
                <a href="#">平台规则</a>
                <a href="#">常见问题</a>
                <a href="#">联系客服</a>
                <a href="#">隐私政策</a>
            </div>
        </footer>
    </div>

    <script>
        // 实名认证按钮交互
        document.querySelector('.auth-action').addEventListener('click', function() {
            const originalText = this.innerHTML;
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 认证中...';
            this.disabled = true;
            
            setTimeout(() => {
                this.innerHTML = '<i class="fas fa-check"></i> 认证成功';
                this.style.background = '#52c41a';
                
                // 更新认证状态
                document.querySelector('.auth-text').innerHTML = 
                    '<span class="highlight">实名认证已完成！</span> 您可以使用全部平台功能';
                document.querySelector('.auth-icon').innerHTML = '<i class="fas fa-check-circle"></i>';
                document.querySelector('.auth-icon').style.background = '#52c41a';
            }, 2000);
        });
        
        // 升级会员按钮交互
        document.querySelectorAll('.upgrade-btn').forEach(btn => {
            if(!btn.disabled) {
                btn.addEventListener('click', function() {
                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
                    
                    setTimeout(() => {
                        alert('您已成功升级为SVIP会员！\n会员有效期至2024年12月31日');
                        this.innerHTML = '升级成功';
                        this.style.background = '#52c41a';
                    }, 1500);
                });
            }
        });
        
        // 充值金额选择
        document.querySelector('select').addEventListener('change', function() {
            if(this.value === 'custom') {
                document.querySelector('input[type="text"]').placeholder = "请输入50元以上金额";
            }
        });
    </script>
</body>
</html>